<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input {
				width: 800px;
				height: 100px;
				border: 1px solid #CCCCCC;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	</head>

	<body>
		<input type="text" name="" id="" value="" />
	</body>
	<script type="text/javascript">
		// 鼠标进入事件
		// 下面这两个函数是jquery里面默认的写法
		//		$('input').mouseenter(function(){
		//			$('input').css({
		//				"border":"5px solid green"
		//			})
		//			
		//		})
		//		// 鼠标离开事件
		//		$('input').mouseleave(function(){
		//			$('input').css({
		//				"border":"1px solid #ccc"
		//			})
		//		})
		// 表示鼠标进入调用的函数
		/**
		 * 因为在jquery里面，进入和离开用的特别多，所以jquery给咱们提供了简写的方式
		 */
		$('input').hover(function() {
			// 写咱们的业务逻辑
			//			console.log('鼠标进入的时候调用的函数')
			$('input').css({
				"border": "5px solid blue"
			})
		}, function() {
			// 表示鼠标离开的时候调用
			//			console.log('鼠标离开的时候调用的函数')
			$("input").css({
				"border": "1px solid #ccc"
			})
		})
	</script>

</html>